<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visualize Data</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
            color: #333;
        }
        .form-container {
            background: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            display: flex;        /* 使用Flexbox布局 */
            justify-content: space-around; /* 元素均匀分布 */
            align-items: center;  /* 垂直居中 */
        }

        input, select, button {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            border: none;
            cursor: pointer;
            padding: 5px 15px;
        }
        button:hover {
            background-color: #4cae4c;
        }
        label {
            margin-right: 5px;
        }
    </style>

    <script>
        // 在DOM加载完成后运行的函数
        window.onload = function() {
        // 获取按钮元素
        var popupButton = document.getElementById('abc');

        // 为按钮添加点击事件监听器
        popupButton.onclick = function() {
            // 显示alert弹窗
            alert('文件上传成功');
        };
        };
    </script>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('userDataForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(form);
                var jsonData = {};
                formData.forEach(function(value, key){
                    jsonData[key] = value;
                });

                fetch('/user/insert', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(jsonData) // 发送JSON字符串
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                    alert('Data inserted successfully!');
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            });
        }
    });



    function drawModel() {
        var selectedModel = document.getElementById('modelSelect').value;
        if (selectedModel) {
            fetch('/user/draw', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ method: selectedModel })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('错误：' + data.error);
                } else {
                    alert('图像绘制成功');
                }
            })
            .catch((error) => console.error('Error:', error));
        } else {
            alert('请选择一个模型');
        }
    }

    function clearData() {
        fetch('/user/clear', {
            method: 'POST',
        })
        .then(response => response.text())
        .then(data => {
            alert(data); // 弹出后端返回的消息
            refreshImage(); // 重新调用绘制图像的函数
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }

    function refreshImage() {
            // 设置为全局变量
        var select = document.getElementById("modelSelect");
        var imageDisplay = document.getElementById("imageDisplay");
        var timestamp = new Date().getTime(); // 获取当前时间戳
        imageDisplay.innerHTML = '<img src="' + getImageSrcByModel(select.value) + '?t=' + timestamp + '" alt="Generated Image">';
    }

    function getImageSrcByModel(model) {
        switch (model) {
            case "Default":
                return "/static/images/user/Mall_Customers_KMeans_Clustering_With_New_Data.png";
            case "K-means":
                return "/static/images/user/Mall_Customers_Clustering_KMeans.png";
            case "DBSCAN":
                return "/static/images/user/Mall_Customers_Clustering_DBSCAN.png";
            case "AP":
                return "/static/images/user/Mall_Customers_Clustering_AP.png";
            default:
                return "";
        }
    }
    </script>
</head>
<body>
    <div class="form-container">
        <label> <b>用户画像模块</b> </label>
        <div class="form-container">
            <form id="userDataForm">
                <label for="gender">企业类型:</label>
                <select id="gender" name="Gender" required>
                    <option value="">企业类型</option>
                    <option value="Female">国企</option>
                    <option value="Male">私企</option>
                </select>
                <label for="age">企业成立年限:</label>
                <input type="number" id="age" name="Age" required min="1" step="1">
                <label for="annualIncome">年销售额(百万):</label>
                <input type="number" id="annualIncome" name="Annual Income (k$)" required min="1" step="1">
                <label for="spendingScore">利润率:</label>
                <input type="number" id="spendingScore" name="Spending Score (1-100)" required min="1" max="100" step="1">
                <button type="submit">提交</button>
            </form>
        </div>
    </div>

    <div class="form-container">
        <div>
            <form> <!-- action="/user/upload" method="post" enctype="multipart/form-data"> -->
            <label>上传历史数据(CSV):</label>
            <input type="file" name="file" required>
            <input type="submit" id="abc" value="上传">
        </form>
        </div>
        <div>
            <label for="modelSelect">选择模型:</label>
            <select id="modelSelect">
                <option value="">未选择模型</option>
                <option value="Default">Default</option>
                <option value="K-means">K-means</option>
                <option value="DBSCAN">DBSCAN</option>
                <option value="AP">AF</option>
            </select>
            <button type="button" id="drawButton" onclick="drawModel()">图像绘制</button>
            <button type="button" id="refreshButton" onclick="refreshImage()">展示图像</button>
            <button type="button" id="clearButton" onclick="clearData()">清除数据</button>
        </div>


    </div>


    <div class="form-container" id="imageDisplay">
    <!-- 图片将显示在这里 -->
    </div>

</body>
</html>